<template>
    <el-button plain @click="dialogTableVisible = true" type="success">添加</el-button>
    <el-table :data="tableData" style="width: 100%" border>
        <el-table-column fixed prop="" type="index" label="序号" width="60" />
        <el-table-column prop="menuName" label="菜单名称" width="100" />
        <el-table-column prop="url" label="菜单Url" width="100" />
        <el-table-column prop="parentName" label="父级菜单" width="120">
            <template #default="scope">
                <el-in v-if="scope.row.pId == 0"></el-in>
            </template>
        </el-table-column>

        <el-table-column prop="crearName" label="创建人" width="100" />

        <el-table-column prop="crearTime" label="创建时间" width="100">
            <template #default="scope">
                <span>{{
                    moment(scope.row.crearTime).format("YYYY-MM-DD HH:mm:ss")
                    }}</span>
            </template>
        </el-table-column>

        <el-table-column prop="updateName" label="修改人" width="100" />

        <el-table-column prop="updateTime" label="修改时间" width="100">
            <template #default="scope">
                <span v-if="scope.row.updateTime == null"></span>
                <span v-else>{{
                    moment(scope.row.updateTime).format("YYYY-MM-DD HH:mm:ss")
                    }}</span>
            </template>
        </el-table-column>

        <el-table-column fixed="right" label="Operations" min-width="100">
            <template #default="scope">
                <el-button link type="primary" size="small" @click="getzimenu(scope.row.id)">
                    删除
                </el-button>
                <el-button link type="primary" size="small" @click="Update(scope.row)">修改</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 添加 -->
    <el-dialog v-model="dialogTableVisible" title="添加" width="800">
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm"  label-width="auto">
            <el-form-item label="父级菜单：" prop="region">
                <el-select v-model="ruleForm.pId" placeholder="请选择父级菜单">
                    <el-option label="顶级菜单" :value="0" />
                    <el-option v-for="s in farMenu" :label="s.menuName" :value="s.id" />
                </el-select>
            </el-form-item>

            <el-form-item label="菜单名称：" prop="menuName">
                <el-input v-model="ruleForm.menuName" />
            </el-form-item>
            <el-form-item label="跳转的Ur地址：" prop="url">
                <el-input v-model="ruleForm.url" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    保存
                </el-button>
                <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!-- 修改 -->
    <el-dialog v-model="dialogTableVisible1" title="添加" width="800">
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm"  label-width="auto">
            <el-form-item label="父级菜单：" prop="region">
                <el-select v-model="ruleForm.pId" placeholder="请选择父级菜单">
                    <el-option label="顶级菜单" :value="0" />
                    <el-option v-for="s in farMenu" :label="s.menuName" :value="s.id" />
                </el-select>
            </el-form-item>

            <el-form-item label="菜单名称：" prop="menuName">
                <el-input v-model="ruleForm.menuName" />
            </el-form-item>
            <el-form-item label="跳转的Ur地址：" prop="url">
                <el-input v-model="ruleForm.url" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm1()"> 保存 </el-button>
                <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script lang="ts" setup>
import axios from "axios";
import moment from "moment";
import { onMounted, ref } from "vue";
import https from '../../http/AxiosHelper';
//显示
const tableData = ref([]);
const getData = () => {
    https.get("api/Menu/GetMenu").then((res) => {
        tableData.value = res.data.data;
    });
};
onMounted(() => {
    getData();
    GetMenu();
});
//弹框
const dialogTableVisible = ref(false);
const dialogTableVisible1 = ref(false);
const dialogTableVisible2 = ref(false);
const dialogTableVisible3 = ref(false);
//添加
import { reactive } from "vue";
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
    pId: "",
    menuName: "",
    url: "",
});
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log("submit!");
            https
                .post("api/Menu/AddMenu", ruleForm)
                .then(res => {
                    if (res.data.code == 200) {
                        ElMessage.success(res.data.msg);
                        dialogTableVisible.value = false;
                        ruleForm.menuName = "",
                            ruleForm.url = "",
                            ruleForm.pId = "",
                            getData();
                            GetMenu();
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                });
        } else {
            console.log("error submit!", fields);
        }
    });
};
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
    getData();
};
// 父级菜单
const farMenu = ref([
    {
        id: "",
        menuName: "",
    },
]);
const GetMenu = () => {
    https.get("api/Menu/GetFarXia").then((res) => {
        farMenu.value = res.data.data;
        getData();
    });
};
//修改
const Update = (row: any) => {
    dialogTableVisible1.value = true;
    Object.assign(ruleForm, row);
};
const submitForm1 = () => {
    https
        .post("api/Menu/UpdateMenu", ruleForm)
        .then((res) => {
            if (res.data.code == 200) {
                ElMessage.success(res.data.msg);
                dialogTableVisible1.value = false;
                getData();
            } else {
                ElMessage.error(res.data.msg);
            }
        });
};

import { ElMessageBox } from "element-plus";
//查询是否有子级
const getzimenu = (id: any) => {
    ElMessageBox.confirm("确定删除吗", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(() => {
            https
                .get("api/Menu/GetMenuZi", { params: { Id: id } })
                .then((res) => {
                    if (res.data.code == 200) 
                    {

                        getzimenuzi(id);
                    } else {
                        open(id);
                    }
                });
        })
        .catch(() => {
            ElMessage({
                type: "info",
                message: "删除被取消",
            });
        });
};
//查询是否有子级
const getzimenuzi = (id: any) => {
    ElMessageBox.confirm(
        "该菜单有子级确定删除所有子级及所有子级的子级吗？",
        "警告",
        {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        }
    )
        .then(() => {
            https
                .get("api/Menu/GetMenuZi", { params: { Id: id } })
                .then((res) => {
                    if (res.data.code == 200) {
                        open(id);
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                });
        })
        .catch(() => {
            ElMessage({
                type: "info",
                message: "删除被取消",
            });
        });
};
// 删除
const open = (id: any) => {
    https.get("api/Menu/DelMenu",{params: { Id: id }}).then(res => {
        if (res.data.code == 200) {
            ElMessage.success(res.data.msg);
            getData();
        }
        else {
            ElMessage.error(res.data.msg);
        }
    })
}
</script>
